<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="./jquery.edittable.min.js"></script>
    <link rel="stylesheet" href="./jquery.edittable.min.css">
    <link rel="stylesheet" href="./main.css">
</head>
<body>

<div id="edittable"></div>

</body>

<script>
    var mynewtable = $('#edittable').editTable({
        field_templates: {
            'checkbox' : {
                html: '<input type="checkbox"/>',
                getValue: function (input) {
                    return $(input).is(':checked');
                },
                setValue: function (input, value) {
                    if ( value ){
                        return $(input).attr('checked', true);
                    }
                    return $(input).removeAttr('checked');
                }
            },
            'textarea' : {
                html: '<textarea/>',
                getValue: function (input) {
                    return $(input).val();
                },
                setValue: function (input, value) {
                    return $(input).text(value);
                }
            },
            'select' : {
                html: '<select><option value="">None</option><option>All</option></select>',
                getValue: function (input) {
                    return $(input).val();
                },
                setValue: function (input, value) {
                    var select = $(input);
                    select.find('option').filter(function() {
                        return $(this).val() == value;
                    }).attr('selected', true);
                    return select;
                }
            }
        },
        row_template: ['checkbox', 'text', 'text', 'textarea'],
        headerCols: ['Yes/No','Date','Value','Description'],
        maxRows : 999,
        first_row: false,
        data: [
            [false,"01/30/2013","50,00 €","Lorem ipsum...\n\nDonec in dui nisl. Nam ac libero eget magna iaculis faucibus eu non arcu. Proin sed diam ut nisl scelerisque fermentum."],
            [true,"02/28/2013","50,00 €",'This is a <textarea>','All']
        ],
        validate_field: function (col_id, value, col_type, $element) {
            if ( col_type === 'checkbox' ) {
                $element.parent('td').animate({'background-color':'#fff'});
                if ( value === false ){
                    $element.parent('td').animate({'background-color':'#DB4A39'});
                    return false;
                }
            }
            return true;
        },
        tableClass: 'inputtable custom'

    });

</script>
</html>